:host .quark-popover {
  display: inline-flex;
  position: relative;
  overflow: visible;
  cursor: pointer;
}

:host .quark-popover-tips {
  display: flex;
  position: absolute;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transition: quark-animationDurationBase;
  transition-timing-function: quark-animationTimingEnter;
  transform: translate(-50%, -24px);
}

.quark-popover-leave {
  transition: transform quark-animationDurationFast;
  transition-timing-function: quark-animationTimingLeave;
}

:host .quark-popover-content {
  border-radius: 4px;
  background-color: var(--popover-background-color, #4a4a4a);
  max-width: 200px;
  width: max-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:host([theme="light"]) .quark-popover-content {
  background-color: var(--popover-background-color, #fff);
}

:host .quark-popover-triangle {
  width: 0;
  height: 0;
  overflow: hidden;
  border: 6px solid transparent;
}

:host([open]) .quark-popover-tips {
  visibility: visible;
  opacity: 1;
}

:host([placement="top"]) .quark-popover-tips {
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -24px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:host([placement="top"]) .quark-popover-triangle {
  border-top-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="top"][theme="light"]) .quark-popover-triangle {
  border-top-color: var(--popover-background-color, #fff);
}

:host([placement="top"][open]) .quark-popover-tips {
  transform: translate(-50%, var(--popover-margin-bottom, 0px));
}

/* right */
:host([placement="right"]) .quark-popover-tips {
  left: 100%;
  top: 50%;
  transform: translate(24px, -50%);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

:host([placement="right"]) .quark-popover-triangle {
  border-right-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="right"][theme="light"]) .quark-popover-triangle {
  border-right-color: var(--popover-background-color, #fff);
}

:host([placement="right"][open]) .quark-popover-tips {
  transform: translate(var(--popover-margin-left, 10px), -50%);
}

/* bottom */
:host([placement="bottom"]) .quark-popover-tips {
  left: 50%;
  top: 100%;
  transform: translate(-50%, 24px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

:host([placement="bottom"]) .quark-popover-triangle {
  border-bottom-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="bottom"][theme="light"]) .quark-popover-triangle {
  border-bottom-color: var(--popover-background-color, #fff);
}

:host([placement="bottom"][open]) .quark-popover-tips {
  transform: translate(-50%, var(--popover-margin-top, 0px));
}

/* left */
:host([placement="left"]) .quark-popover-tips {
  right: 100%;
  top: 50%;
  transform: translate(-24px, -50%);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

:host([placement="left"]) .quark-popover-triangle {
  border-left-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="left"][theme="light"]) .quark-popover-triangle {
  border-left-color: var(--popover-background-color, #fff);
}

:host([placement="left"][open]) .quark-popover-tips {
  transform: translate(var(--popover-margin-right, -10px), -50%);
}

/* topleft */
:host([placement="topleft"]) .quark-popover-tips {
  left: 0;
  bottom: 100%;
  transform: translate(0, -24px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

:host([placement="topleft"]) .quark-popover-triangle {
  margin-left: 16px;
  border-top-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="topleft"][theme="light"]) .quark-popover-triangle {
  border-top-color: var(--popover-background-color, #fff);
}

:host([placement="topleft"][open]) .quark-popover-tips {
  transform: translate(0, var(--popover-margin-right, 0));
}

/* topright */
:host([placement="topright"]) .quark-popover-tips {
  right: 0;
  bottom: 100%;
  transform: translate(0, -24px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

:host([placement="topright"]) .quark-popover-triangle {
  margin-right: 16px;
  border-top-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="topright"][theme="light"]) .quark-popover-triangle {
  border-top-color: var(--popover-background-color, #fff);
}

:host([placement="topright"][open]) .quark-popover-tips {
  transform: translate(0, var(--popover-margin-right, 0));
}

/* righttop */
:host([placement="righttop"]) .quark-popover-tips {
  left: 100%;
  top: 0;
  transform: translate(24px, 0);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

:host([placement="righttop"]) .quark-popover-triangle {
  border-right-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="righttop"][theme="light"]) .quark-popover-triangle {
  border-right-color: var(--popover-background-color, #fff);
}

:host([placement="righttop"][open]) .quark-popover-tips {
  transform: translate(var(--popover-margin-left, 10px), 0);
}

/* rightbottom */
:host([placement="rightbottom"]) .quark-popover-tips {
  left: 100%;
  bottom: 0;
  transform: translate(24px, 0);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

:host([placement="rightbottom"]) .quark-popover-triangle {
  border-right-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="rightbottom"][theme="light"]) .quark-popover-triangle {
  border-right-color: var(--popover-background-color, #fff);
}

:host([placement="rightbottom"][open]) .quark-popover-tips {
  transform: translate(var(--popover-margin-left, 10px), 0);
}

/* bottomleft */
:host([placement="bottomleft"]) .quark-popover-tips {
  left: 0;
  top: 100%;
  transform: translate(0, 24px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

:host([placement="bottomleft"]) .quark-popover-triangle {
  margin-left: 16px;
  border-bottom-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="bottomleft"][theme="light"]) .quark-popover-triangle {
  border-bottom-color: var(--popover-background-color, #fff);
}

:host([placement="bottomleft"][open]) .quark-popover-tips {
  transform: translate(0, var(--popover-margin-left, 0px));
}

/* bottomright */
:host([placement="bottomright"]) .quark-popover-tips {
  right: 0;
  top: 100%;
  transform: translate(0, 24px);
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

:host([placement="bottomright"]) .quark-popover-triangle {
  margin-right: 16px;
  border-bottom-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="bottomright"][theme="light"]) .quark-popover-triangle {
  border-bottom-color: var(--popover-background-color, #fff);
}

:host([placement="bottomright"][open]) .quark-popover-tips {
  transform: translate(0, var(--popover-margin-left, 0));
}

/* lefttop */
:host([placement="lefttop"]) .quark-popover-tips {
  right: 100%;
  top: 0;
  transform: translate(-24px, 0);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

:host([placement="lefttop"]) .quark-popover-triangle {
  border-left-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="lefttop"][theme="light"]) .quark-popover-triangle {
  border-left-color: var(--popover-background-color, #fff);
}

:host([placement="lefttop"][open]) .quark-popover-tips {
  transform: translate(var(--popover-margin-right, -10px), 0);
}

/* leftbottom */
:host([placement="leftbottom"]) .quark-popover-tips {
  right: 100%;
  bottom: 0;
  transform: translate(-24px, 0);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

:host([placement="leftbottom"]) .quark-popover-triangle {
  border-left-color: var(--popover-background-color, #4a4a4a);
}

:host([placement="leftbottom"][theme="light"]) .quark-popover-triangle {
  border-left-color: var(--popover-background-color, #fff);
}

:host([placement="leftbottom"][open]) .quark-popover-tips {
  transform: translate(var(--popover-margin-right, -10px), 0);
}

:host slot {
  border-radius: inherit;
}

:host .quark-popover-icon {
  width: var(--popover-action-font-size, 14px);
  height: auto;
}

:host .quark-popover-action-container {
  padding-left: var(--popovers-hspacing, 16px);
  padding-right: var(--popover-hspacing, 16px);
  height: var(--popover-action-height, 44px);
  min-width: 100px;
  font-weight: var(--popover-action-font-weight, 400);
  line-height: var(--popover-action-line-height, 20px);
  text-align: center;
  color: var(--popover-color, #fff);
  font-size: var(--popover-action-font-size, 14px);
  font-style: normal;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

:host([theme="light"]) .quark-popover-action-container {
  color: var(--popover-color, quark-textBaseColor);
}

:host .quark-action-container-disable {
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  color: #c8c9cc;
}

:host([theme="light"]) .quark-action-container-disable {
  color: #c8c9cc;
}

:host .quark-popover-action-container:after {
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 16px;
  bottom: 0;
  left: 16px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

:host([theme="light"]) .quark-popover-action-container:after {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

:host .quark-popover-action-container:last-child::after {
  border: none;
}
